<script setup lang="ts">
import UxIcon from "./icons/UxIcon.vue";
import ArIcon from "./icons/ArIcon.vue";
import DocIcon from "./icons/DocIcon.vue";
import SidebarItem from "./SidebarItem.vue";
import VideoIcon from "./icons/VideoIcon.vue";
import AllAppIcon from "./icons/AllAppIcon.vue";
import UpdatesIcon from "./icons/UpdatesIcon.vue";
import SidebarItemSection from "./SidebarItemSection.vue";
import PhotographyIcon from "./icons/PhotographyIcon.vue";
import IllustrationIcon from "./icons/IllustrationIcon.vue";
import GraphicDesignIcon from "./icons/GraphicDesignIcon.vue";
</script>

<template>
  <div>
    <SidebarItemSection name="Apps">
      <SidebarItem title="All Apps" to="/options">
        <AllAppIcon />
      </SidebarItem>
      <SidebarItem title="Updates" to="/login">
        <UpdatesIcon />
      </SidebarItem>
    </SidebarItemSection>

    <SidebarItemSection name="Categories">
      <SidebarItem title="Photography" to="/options1">
        <PhotographyIcon />
      </SidebarItem>
      <SidebarItem title="Graphic Design" to="/options1">
        <GraphicDesignIcon />
      </SidebarItem>
      <SidebarItem title="Videos" to="/options1">
        <VideoIcon />
      </SidebarItem>
      <SidebarItem title="Illustration" to="/options1">
        <IllustrationIcon />
      </SidebarItem>
      <SidebarItem title="UI/UX" to="/options1">
        <UxIcon />
      </SidebarItem>
      <SidebarItem title="3D/AR" to="/options1">
        <ArIcon />
      </SidebarItem>
    </SidebarItemSection>

    <SidebarItemSection name="Guides">
      <SidebarItem title="Documentation" to="/options1">
        <DocIcon />
      </SidebarItem>
    </SidebarItemSection>
  </div>
</template>
